<template>
  <div class="text-sm">
    <el-input
      v-model="search_value"
      placeholder="请输入"
      class="input-with-select"
      @keyup.enter="add"
    >
      <template #append>
        <div>
          <el-button :icon="Search" @click="search" />
        </div>
      </template>
    </el-input>
    <p class="text-purple-600 hover:text-red-500">测试</p>
  </div>
</template>

<script setup lang="ts">
import { watch, ref, defineEmits } from "vue";
import { Search, Plus } from "@element-plus/icons-vue";

const emit = defineEmits(["change", "add", "search"]);
const search_value = ref("");

watch(
  () => search_value,
  (pre, cur) => {
    if (cur) search_value.value = cur;
  }
);

const search = () => {
  // console.log("se", search_value.value.trim());
  emit("search", search_value.value.trim());
};
const add = () => {
  emit("add", search_value.value);
  search_value.value = "";
};
</script>

<style scoped></style>
